<script setup lang="ts">
defineOptions({
  name: "scrolltableCard"
});
import { ref, onMounted, computed, nextTick, watch } from "vue";
import modelTitle from "@/views/common/components/modelTitle/index.vue";
import { emitter } from "@/utils/mitt";
import ToolTip from "./toolTip/index.vue";

interface Props {
  tableData?: any[];
  /**  有 title 时传入 */
  title?: string;
  /**  有按钮时传入，传入后会有 btn-click 事件 */
  button?: string;
  /**  title 栏右侧文字 */
  rightText?: string;
  /**  模块最低宽度，默认 257px */
  width?: number;
  /**  模块最低高度，默认 292px */
  height?: number;
  /**  空数据展示图片尺寸 */
  imageSize?: number;
  /**  表格数据 */
  dataList?: any[];
  /**  是否显示下载按钮 */
  showDownload?: boolean;
}

interface Emits {
  /**  title 右侧按钮点击后触发 */
  (event: "btn-click"): void;
  (event: "request-data"): void;
}

const emits = defineEmits<Emits>();

const props = withDefaults(defineProps<Props>(), {
  width: 350,
  height: 292,
  showDownload: false,
  imageSize: 100
});

const clickHandler = () => emits("btn-click");

const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return "color-row";
  }
  return "common-row";
};

onMounted(async () => {
  await nextTick();
  emits("request-data");
});

const title_height = computed(() => (props.title ? "32px" : "0px"));
const min_width = computed(() => `${props.width}px`);
const min_height = computed(() => `${props.height}px`);
// const showPoint = computed(() => {
//   return props.dataList && props.dataList.length > 0 && props.dataList.some(item => item.value >= 0);
// });
</script>

<template>
  <div>
    <div class="table-card">
      <modelTitle v-if="title" :title="title">
        <div class="model-title-slot">
          <span v-if="rightText" class="right-text">{{ rightText }}</span>
          <!-- <span v-if="showPoint" class="right-point_green" /> -->
          <!-- <span v-else-if class="right-point_gray" /> -->
          <!-- <px-button v-else-if="button" type="primary" size="small" plain @click="clickHandler">{{ button }}</px-button> -->
          <px-icon v-else-if="showDownload" color="#3B82F6" @click="clickHandler"><Download /></px-icon>
        </div>
      </modelTitle>
      <px-scrollbar>
        <px-table class="table-card-table table-card-con" :data="dataList" style="width: 100%" :row-class-name="tableRowClassName">
          <px-table-column type="index" label="序号" width="80" />
          <px-table-column prop="name" label="系统" />
          <px-table-column prop="valueFormat" label="能耗" />
          <px-table-column prop="percent" label="占比" />
        </px-table>
        <!-- <div v-if="props.dataList && props.dataList.length" class="table-card-con">
          <div class="table-card-item">
            <div class="table_title">{{ "序号" }}</div>
            <div class="table_title">{{ "系统" }}</div>
            <div class="table_title">{{ "能耗" }}</div>
            <div class="table_title">{{ "占比" }}</div>
          </div>
          <div
            v-for="(item, index) in props.dataList"
            :key="index"
            class="table-card-item"
            :style="{
              background: index % 2 !== 0 ? '' : '#E7EEFB'
            }"
          >
            <div>{{ index + 1 }}</div>
            <div>
              <ToolTip :content="item.name" />
            </div>
            <div>
              {{ `${item.valueFormat}${item.unit}` || "--" }}
            </div>
            <div>
              {{ `${item.percent}%` || "--" }}
            </div>
          </div>
        </div>
        <div v-else class="echarts-empty">
          <px-empty :image-size="imageSize" />
        </div> -->
      </px-scrollbar>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.table-card {
  box-sizing: border-box;
  width: 100%;
  min-width: v-bind(min_width);
  height: 100%;
  min-height: v-bind(min_height);
  padding: 16px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 10px 0 rgb(0 37 86 / 12%);

  .model-title-slot {
    display: flex;
    gap: 16px;
    align-items: center;

    .right-text {
      font-weight: 600;
      line-height: 1;
      color: var(--px-color-primary);
    }

    .right-point_green {
      width: 9px;
      height: 9px;
      background-color: #00e272;
      border-radius: 50%;
    }

    .right-point_gray {
      width: 9px;
      height: 9px;
      background-color: #d0d0d0;
      border-radius: 50%;
    }

    .px-icon {
      cursor: pointer;
    }
  }

  .table-card-con {
    width: 100%;
    height: calc(v-bind(min_height) - v-bind(title_height) - 32px);

    .table-card-item {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 38px;
      padding: 0 10px;
      line-height: 38px;

      div {
        width: 25%;
      }

      .table_title {
        font-size: 16px;
        font-weight: bold;
      }

      .tool_tip {
        width: 66%;
        white-space: pre-wrap;
      }
    }
  }

  /** 删除表格所有边框线 */
  .table-card-table :deep(.px-table__header th) {
    border-bottom: none;
  }

  .table-card-table :deep(.px-table__row > td) {
    border: none;
  }

  .table-card-table :deep(.px-table th.px-table__cell.is-leaf) {
    border-bottom: none;
  }

  .table-card-table :deep(.px-table__inner-wrapper::before) {
    height: 0;
  }

  /** 改变表格斑马纹颜色 */
  .table-card-table :deep(.color-row) {
    height: 41px;
    background: #e7eefb;
  }

  .table-card-table :deep(.common-row) {
    height: 41px;
  }
}
</style>
